<template>
  <div class="common-layout">
    <el-form class="header" :model="queryParam" ref="queryRef" :inline="true">
      <el-form-item label="名称" prop="name">
        <el-input
            v-model="queryParam.name"
            placeholder="请输入任务名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="标题" prop="name">
        <el-input
            v-model="queryParam.name"
            placeholder="请输入任务名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="queryParam.type" placeholder="请选择任务类型" clearable style="width: 200px">
          <el-option
              v-for="dict in typeStatus"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="active">
        <el-select v-model="queryParam.active" placeholder="请选择任务状态" clearable style="width: 200px">
          <el-option
              v-for="dict in task_active_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button v-if="false" type="success" @click="sendEvent">发送</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="padding-left: 20px">
        <el-table :data="stepList">
          <el-table-column label="任务编号" width="120" align="center" prop="main"/>
          <el-table-column label="任务类型" width="120" align="center" prop="type">
            <template #default="scope">
              <span>{{typeStatus[scope.row.type].name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务名称" align="center" prop="name"/>
          <el-table-column v-if="false" label="标题" align="center" prop="title"/>
          <el-table-column label="任务内容" align="center" prop="content"/>
          <el-table-column label="最低比率" width="80" align="center" prop="rate"/>
          <el-table-column v-if="false" label="校区"  width="80" align="center" prop="campus"/>
          <el-table-column label="学生" width="120" align="center" prop="studentName"/>
          <el-table-column label="截止时间" width="180" align="center" prop="end"/>
          <el-table-column label="创建时间" align="center" prop="time">
            <template #default="scope">
              <span>{{ parseTime(scope.row.time, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务状态" width="120" align="center" prop="active">
            <template #default="scope">
              <dict-tag :options="task_active_status" :value="scope.row.active"/>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                  link
                  type="danger"
                  v-if="scope.row.active === 2 || scope.row.active === 3"
                  @click="completeTask(scope.row)"
              >撤销
              </el-button>
              <span v-if="scope.row.active === 4 || scope.row.active === 1">无需操作</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
            style="margin-right: 20px"
            v-show="size > 0"
            :total="size"
            v-model:page="queryParam.pageNum"
            v-model:limit="queryParam.pageSize"
            @pagination="handleQuery"
        />
      </el-col>
    </el-row>

  </div>
</template>
<!--我的任务分配-->
<script setup>
import {ref} from "vue";
import {
  addStep_progress,
  listStep_progress,
  listStep_progress_user,
  typeStatus,
  updateStep_progress
} from "@/api/teach/step.js";
import {parseTime} from "@/utils/ruoyi.js";

const {proxy} = getCurrentInstance()

let queryParam = ref({
  pageNum: 1,
  pageSize: 10
})
let queryDetails = ref({
  main: undefined
})

const {task_active_status} = proxy.useDict("task_active_status")

const active = ref(0)
let stepList = ref([])
let task_detailList = ref([])
let size = ref(0)

initPage()

function initPage() {
  handleQuery()
}

function completeTask(row){
  // console.log(row)
  let completeForm = {
    id: row.id,
    studentId: row.studentId,
    active: 4,
  }
  updateStep_progress(completeForm).then(response => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess("任务已撤销")
      handleQuery()
      // console.log(nextQuery)
    }
  })
}

function sendEvent(){
  // const asyncData = { user: 'Alice', timestamp: Date.now() };
  // console.log('发送异步事件:');
  // eventBus.emit('complete', { message: 'Hello from component!',timestamp: Date.now() });
  // proxy.$modal.msgSuccess("事件已发送")
  // eventBus.emit('user_complete', asyncData);
  // return sendEventVal;
  // eventStore.triggerEvent({ message: 'Hello from Pinia!' });
}

function resetQuery() {
  queryParam.value = {}
  initPage()
}

function handleQuery() {
  listStep_progress_user(queryParam.value).then(response => {
    console.log(response)
    if (response.code === 200) {
      size.value = response.total
      stepList.value = response.rows;
    }
  })
}

</script>

<style scoped lang="scss">
.header {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
